<script setup>
import { onMounted, ref } from 'vue'
import{useLocalWeatherStore } from '@/stores/LocalWeather'
const CityWeather = useLocalWeatherStore()
const dialogVisible = ref(false)
const detailBox = ref(null)
const handleClick = (e) => {
    e.stopPropagation()
    if (e.target.classList.contains('detail-bg')) {
        dialogVisible.value = false
    }
}
</script> 
<template>
    <div class="weather-nav padding-20 font-white">
        <a href="/" class="my-icon font-white">
            <div>
                <i class="iconfont icon-tianqi"></i>
                <span>你好天气</span>
            </div>
        </a>
        <div class="city-weather">
            <div class="city">{{ CityWeather.LocalCity.city }}</div>
            <div class="weather">实时天气:{{CityWeather.nowWeather.weather}}
            &nbsp;{{CityWeather.nowWeather.temperature}}°C
            </div>
            <div class="wind">{{ CityWeather.nowWeather.winddirection }}风{{ CityWeather.nowWeather.windpower }}</div>
        </div>
        <div class="protect-detail" >
            <i class="iconfont icon-xiangxixinxi" @click="dialogVisible = true"></i>
        </div>
        <Teleport to="body" v-if="dialogVisible">
            <div class="detail-bg" @click="handleClick">
                <div class="detail-box" ref="detailBox">
                    <h5>关于:</h5>
                    <p>这个应用可以用来追踪你选择城市的当前天气</p>
                    <h5>如何使用:</h5>
                    <p>1.点击搜索框输入你希望追踪的城市</p>
                    <p>2.在搜索结果中选中一个城市，你将获取当地最新的天气</p>
                    <p>3.点击右侧的＋号可以将追踪城市的天气情况保存在首页</p>
                    <h5>移除城市:</h5>
                    <p>如果你不想在首页关注某个城市,可以通过底部的按钮删除它</p>
                    <button class="close" @click="dialogVisible = false">
                        关闭
                    </button>
                </div>
            </div>
        </Teleport>

    </div>
</template> 
<style lang="scss" scoped>
.weather-nav {
    position: sticky;
    top: 0;
    width: 100%;
    height: 80px;
    background-color: #00668a;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    z-index: 996;
    display: flex;
    align-items: center;

    a {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 80px;
        text-decoration: none;
        font-size: 30px;
        color: #fff;

        i {
            font-size: 30px;
            margin-right: 10px;
        }
    }

    .city-weather {
        margin-left: 20px;
        display: flex;
        align-items: center;
        font-size: 20px;

        .city {
            font-weight: bold;
            color: #fff;
        }

        .weather {
            color: #fff;
            margin-left: 15px;
        }

        .wind {
            color: #fff;
            margin-left: 15px;
        }
    }

    .protect-detail {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        right: 25%;
        top: 50%;
        transform: translate(50%, -50%);
        cursor: pointer;
        i {
            font-size: 30px;
            color: #fff;
            transition: all 0.6s ease;
            &:hover {
                color:#51504f;
            }
        }

       
    }

}

.detail-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.6s ease;
    .detail-box {
        position: relative;
        width: 400px;
        height: 350px;
        background-color: #fff;
        border-radius: 10px;
        padding: 20px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        justify-content: center;
        h5 {
            font-size: 20px;
            margin-bottom: 10px;
        }

        p {
            font-size: 16px;
            margin-bottom: 20px;
        }

        button {
            width: 100px;
            height: 40px;
            border: none;
            background-color: #00668a;
            color: #fff;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.6s ease;
            &:hover {
                background-color: #00526e;
            }
        }
    }
}
</style>